"use client"

import { Button, ConfigProvider, Space, Layout } from 'antd';
import theme from '../../theme/themeConfig';
import type { CSSProperties } from 'react';
import { Col, Divider, Row } from 'antd';
import CodeEditor from '@/components/CodeEditor';
import { CodeSorter } from '@/components/CodeSorter';

const { Header, Footer, Sider, Content } = Layout;

const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 360,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};

const siderStyle: CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};

const footerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};

export default function Home() {
  return (
    <ConfigProvider theme={theme}>
      <Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
        <Layout style={{ height: '100vh' }}>
          <Header style={headerStyle}>Header</Header>
          <Layout>
            <Content style={contentStyle}>
              <Row gutter={4}>
                <Col className="gutter-row" span={4}>
                  <div>Command Lists</div>
                </Col>
                <Col className="gutter-row" style={{ backgroundColor: '#cecece' }} span={10}>
                  <CodeSorter />
                </Col>
                <Col className="gutter-row" span={10}>
                  <CodeEditor />
                </Col>
              </Row></Content>
          </Layout>
        </Layout>
      </Space>
    </ConfigProvider>
  )
}
